<template>
  <div class="flex flex-col">
    <mci-label class="py-5"> 参数 </mci-label>
    <div class="bg-fill-2 px-4 py-4">
      <div class="max-h-500" style="width: 100%; overflow: auto">
        <div class="grid gap-x-2 gap-y-4 grid-cols-5 bg-fill-2">
          <!-- 标题行 -->
          <div class="bg-fill-0 px-10 py-8">
            <mci-text model-value="参数名称" />
          </div>
          <div class="bg-fill-0 p, px-10 py-8">
            <mci-text model-value="字段Key" />
          </div>
          <div class="bg-fill-0 px-10 py-8">
            <mci-text model-value="字段类型" />
          </div>
          <div class="bg-fill-0 px-10 py-8">
            <mci-text model-value="默认值" />
          </div>
          <div class="bg-fill-0 px-10 py-8">
            <mci-text model-value="值" />
          </div>
        </div>
      </div>
      <!-- 字段行 -->
      <div v-for="(item, index) in listDatas" :key="index" class="grid gap-x-2 gap-y-4 grid-cols-5 bg-fill-2">
        <div class="bg-fill-0 px-10 py-6">
          <mci-text :model-value="item.varLabel" />
        </div>
        <div class="bg-fill-0 px-10 py-6">
          <mci-text :model-value="item.varName" />
        </div>
        <div class="bg-fill-0 px-10 py-6">
          <mci-text :model-value="item.varTypeLabel" />
        </div>
        <div class="bg-fill-0 px-10 py-6">
          <mci-text :model-value="item.initValue" />
        </div>

        <div class="bg-fill-0 px-10 py-4">
          <mci-input v-model="item.value" @update:model-value="handleInputValue" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { MciInput, MciText, MciLabel } from '@/components/base';
import { VarType } from './data';

const props = defineProps<{
  data: any;
}>();

watch(
  [() => props.data],
  ([newData]) => {
    initData(newData);
  },
  { deep: true }
);

const emit = defineEmits<{
  (e: 'change', value: any): void;
}>();

const listDatas = ref<any[]>([]);

const initData = (data: any) => {
  if (data) {
    listDatas.value = data.map((item: any) => {
      let type: any = item.varType;
      if (type) {
        switch (type) {
          case VarType.Boolean:
            type = '布尔';
            break;
          case VarType.DateTime:
            type = '日期时间';
            break;
          case VarType.Decimal:
            type = '小数';
            break;
          case VarType.Integer:
            type = '整数';
            break;
          case VarType.List:
            type = '列表';
            break;
          case VarType.Object:
            type = 'JSON对象';
            break;
          case VarType.String:
            type = '文本';
            break;
          default:
            break;
        }
      }

      return {
        ...item,
        varTypeLabel: type,
        value: item.value ? item.value : ''
      };
    });
  } else {
    listDatas.value = [];
  }
  emit('change', listDatas.value);
};

initData(props.data);

const handleInputValue = () => {
  emit('change', listDatas.value);
};
</script>
